<template>
    <!-- 下拉表格组件 -->
    <div class="drop-down-table-box">
        <el-table v-loading="loading" ref="myTable" class="drop-down-table-scroller" :data="tableData"
            style="width: 100%" :style="{ height: scrollerHeight + 'px' }" :height="scrollerHeight"
            @scroll.native="handleScroll">
            <el-table-column v-if="disposition.select" type="select" width="55"></el-table-column>
            <el-table-column v-if="disposition.index" type="index" width="50" align="center"
                label="序号"></el-table-column>
            <el-table-column v-for="(item, index) in columnData" :key="'col' + index" :prop="item.fieldName"
                align="center" :label="item.name" :width="item.width ? item.width : ''"></el-table-column>
            <slot name="columns"></slot>
        </el-table>
        <div class="load-more">
            <i class="el-icon-arrow-down" title="展开" @click="unfold"></i>
            <i class="el-icon-arrow-up" title="收起" @click="collapse"></i>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        //配置
        disposition: {
            type: Object,
            default: () => { },
        },
        //列数据
        columnData: {
            type: Array,
            default: () => [],
        },
        //表格数据
        tableData: {
            type: Array,
            default: () => [],
        },
        totalItems: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            scrollerHeight: 250, // 初始高度
            itemHeight: 34, // 每一行的高度
            initialHeight: 250, // 初始高度保存
            loading: false, // 加载状态
        };
    },
    mounted() {
        this.$nextTick(() => {
            const table = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper');
            table.addEventListener('scroll', this.handleScroll);
        });
    },
    beforeDestroy() {
        if (this.$refs.myTable) {
            const table = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper');
            table.removeEventListener('scroll', this.handleScroll);
        }
    },
    methods: {
        // 滚动到底部
        handleScroll(event) {
            const { scrollTop, scrollHeight, clientHeight } = event.target;
            if (scrollTop + clientHeight >= scrollHeight && !this.loading) {
                this.loadMore();
            }
        },
        // 加载更多数据
        loadMore() {
            if (this.tableData.length >= this.totalItems) return;

            this.loading = true;
            this.$emit("loadMore")
            setTimeout(() => {
                this.loading = false;
            })
        },
        // 展开
        unfold() {
            this.loadMore()
            // 增加表格高度
            this.scrollerHeight += 10 * this.itemHeight;
        },
        // 收起
        collapse() {
            // 收起到初始高度
            this.scrollerHeight = this.initialHeight;
            // 清空数据
            this.$emit('clearData')
        },
    },
};
</script>
<style scoped>
.drop-down-table-box {
    background-color: var(--ui-component-background);
}

.drop-down-table-scroller {
    border: 1px solid var(--ui-border-color-base);
    transition: all 0.3s ease;
    /* 添加过渡效果 */
}

.load-more {
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
    font-size: var(--ui-font-size-sm);
}

.load-more i {
    margin: 0 5px;
    color: var(--ui-text-color);
}
</style>